<script setup lang="ts">
  import { ref } from 'vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import InnerPage from '@/components/inner-page/index.vue';
  import {
    // total
    queryTotalArchives,
    // per
    queryPerArchives,
  } from '@/api/reemployment-management/document';
  import TotalAdd from './total-add.vue';
  import TotalInfo from './total-info.vue';
  import PerAdd from './per-add.vue';
  import PerInfo from './per-info.vue';

  const baseNameMap = {
    itemId: { key: 'id', label: '档案ID' },
    itemTitle: { key: 'title', label: '培训题目' },
    itemDate: { key: 'date', label: '培训时间' },
    itemStartDate: { key: 'startDate' },
    itemEndDate: { key: 'endDate' },
    itemLocation: { key: 'address', label: '培训地点' },
    itemCount: { key: 'studentCount', label: '参培人数' },
    btnActionTitle: { label: '操作' },
    btnAction: { label: '查看' },
    //
    stuDocId: { key: 'id', label: '档案ID' },
    stuTitle: { key: 'topArchiveName', label: '参培题目' },
    stuName: { key: 'studentName', label: '学生姓名' },
    stuGender: { key: 'gender', label: '学生性别' },
    stuGenderName: { key: 'genderName', label: '学生性别' },
    stuPhone: { key: 'studentPhone', label: '联系电话' },
  };

  const loading = ref(false);
  const allDataPage = ref({
    total: 0,
    page: 1,
    pageSize: 10,
  });
  const perDataPage = ref({
    total: 0,
    page: 1,
    pageSize: 10,
  });

  const tabActiveKey = ref('');

  // 查询表格列配置
  const allTableColumns = [
    {
      title: baseNameMap.itemId.label,
      dataIndex: baseNameMap.itemId.key,
      // width: 200,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemTitle.label,
      dataIndex: baseNameMap.itemTitle.key,
      // width: 300,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemDate.label,
      dataIndex: baseNameMap.itemDate.key,
      // width: 300,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemLocation.label,
      dataIndex: baseNameMap.itemLocation.key,
      // width: 160,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemCount.label,
      dataIndex: baseNameMap.itemCount.key,
      // width: 240,
    },
    {
      title: baseNameMap.btnActionTitle.label,
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 100,
    },
  ];
  // 查询表格列配置
  const perTableColumns = [
    {
      title: baseNameMap.stuDocId.label,
      dataIndex: baseNameMap.stuDocId.key,
      // width: 200,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.stuTitle.label,
      dataIndex: baseNameMap.stuTitle.key,
      // width: 300,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemDate.label,
      dataIndex: baseNameMap.itemDate.key,
      // width: 300,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.stuName.label,
      dataIndex: baseNameMap.stuName.key,
      // width: 240,
    },
    {
      title: baseNameMap.stuGenderName.label,
      dataIndex: baseNameMap.stuGenderName.key,
      // width: 160,
    },
    {
      title: baseNameMap.stuPhone.label,
      dataIndex: baseNameMap.stuPhone.key,
      // width: 240,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.btnActionTitle.label,
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 100,
    },
  ];

  const allPageTable = usePageTable({
    table: {
      fakePage: true,
      apiFun: (query) => {
        return new Promise((resolve) => {
          const params = {
            ...allDataPage.value,
          };
          queryTotalArchives(params)
            .then((res) => {
              allDataPage.value.total = res.total;
              res.list.map((item: any) => {
                item[baseNameMap.itemDate.key] = `${
                  item[baseNameMap.itemStartDate.key]
                }至${item[baseNameMap.itemEndDate.key]}`;
                return item;
              });
              resolve(res.list);
            })
            .catch((err) => {})
            .finally(() => {
              loading.value = false;
            });
        });
      },
      onSuccess(data) {
        // dataDepartments.value = getDepartmentList(data);
      },
      columns: allTableColumns,
    },
  });
  const perPageTable = usePageTable({
    table: {
      fakePage: true,
      apiFun: (query) => {
        return new Promise((resolve) => {
          const params = {
            ...perDataPage.value,
          };
          queryPerArchives(params)
            .then((res) => {
              perDataPage.value.total = res.total;
              resolve(res.list);
            })
            .catch((err) => {})
            .finally(() => {
              loading.value = false;
            });
        });
      },
      onSuccess(data) {
        //
      },
      columns: perTableColumns,
    },
  });

  const addTotalHandler = ref({
    visible: false,
    props: {
      [baseNameMap.itemId.key]: '',
    },
    onBack: () => {
      addTotalHandler.value.visible = false;
      addTotalHandler.value.props[baseNameMap.itemId.key] = '';
      allPageTable.reload();
    },
    onUpdate: () => {
      // pageTable.reload();
      addTotalHandler.value.onBack();
      allPageTable.reload();
    },
  });
  const addPersonalHandler = ref({
    visible: false,
    props: {
      [baseNameMap.itemId.key]: '',
    },
    onBack: () => {
      addPersonalHandler.value.visible = false;
      addPersonalHandler.value.props[baseNameMap.itemId.key] = '';
      perPageTable.reload();
    },
    onUpdate: () => {
      addPersonalHandler.value.onBack();
      perPageTable.reload();
    },
  });

  const infoTotalHandler = ref({
    props: {
      [baseNameMap.itemId.key]: '',
    },
    onBack: () => {
      infoTotalHandler.value.props[baseNameMap.itemId.key] = '';
      allPageTable.reload();
    },
    onEdit: (id: string) => {
      // console.log('id:', id);
      addTotalHandler.value.props[baseNameMap.itemId.key] = id;
      addTotalHandler.value.visible = true;
      infoTotalHandler.value.onBack();
    },
    onUpdate: () => {
      infoTotalHandler.value.onBack();
      allPageTable.reload();
    },
  });
  const infoPersonalHandler = ref({
    props: {
      [baseNameMap.itemId.key]: '',
    },
    onBack: () => {
      infoPersonalHandler.value.props[baseNameMap.itemId.key] = '';
      perPageTable.reload();
    },
    onEdit: (id: string) => {
      console.log('id:', id);
      addPersonalHandler.value.props[baseNameMap.itemId.key] = id;
      addPersonalHandler.value.visible = true;
      infoPersonalHandler.value.onBack();
    },
    onUpdate: () => {
      infoPersonalHandler.value.onBack();
      perPageTable.reload();
    },
  });
</script>

<template>
  <div class="m-document">
    <div
      v-show="!infoTotalHandler.props.data && !infoPersonalHandler.props.data"
      class="m-trainee-raw"
    >
      <a-tabs v-model="tabActiveKey" default-active-key="doc-all">
        <a-tab-pane key="doc-all" title="总档案">
          <TableLayout
            v-bind="allPageTable.bindProps"
            @create="addTotalHandler.visible = true"
          >
            <template #action="{ record }">
              <a-space>
                <a-button
                  size="small"
                  type="text"
                  @click="
                    infoTotalHandler.props[baseNameMap.itemId.key] =
                      record[baseNameMap.itemId.key]
                  "
                  >{{ baseNameMap.btnAction.label }}</a-button
                >
              </a-space>
            </template>
          </TableLayout>
        </a-tab-pane>
        <a-tab-pane key="doc-per" title="个人档案">
          <TableLayout
            v-bind="perPageTable.bindProps"
            @create="addPersonalHandler.visible = true"
          >
            <template #action="{ record }">
              <a-space>
                <a-button
                  size="small"
                  type="text"
                  @click="
                    infoPersonalHandler.props[baseNameMap.stuDocId.key] =
                      record[baseNameMap.stuDocId.key]
                  "
                  >{{ baseNameMap.btnAction.label }}</a-button
                >
              </a-space>
            </template>
          </TableLayout>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 总档案 -->
    <!-- <Transition name="slide-right"> -->
    <InnerPage
      v-if="addTotalHandler.visible"
      style="z-index: 1000"
      class="m-trainee-add"
      @back="addTotalHandler.onBack"
    >
      <!-- 新增 -->
      <TotalAdd
        v-bind="addTotalHandler.props"
        @cancel="addTotalHandler.onBack"
        @update="addTotalHandler.onUpdate"
      />
    </InnerPage>
    <!-- </Transition> -->
    <!-- <Transition name="slide-right"> -->
    <InnerPage
      v-if="infoTotalHandler.props[baseNameMap.itemId.key]"
      class="m-trainee-info"
      @back="infoTotalHandler.onBack"
    >
      <!-- 详情 -->
      <TotalInfo
        v-bind="infoTotalHandler.props"
        @edit="infoTotalHandler.onEdit"
        @update="infoTotalHandler.onUpdate"
      />
    </InnerPage>
    <!-- </Transition> -->
    <!-- 个人档案 -->
    <!-- <Transition name="slide-right"> -->
    <InnerPage
      v-if="addPersonalHandler.visible"
      style="z-index: 1000"
      class="m-trainee-add"
      @back="addPersonalHandler.onBack"
    >
      <!-- 新增 -->
      <PerAdd
        v-bind="addPersonalHandler.props"
        @cancel="addPersonalHandler.onBack"
        @update="addPersonalHandler.onUpdate"
      />
    </InnerPage>
    <!-- </Transition> -->
    <!-- <Transition name="slide-right"> -->
    <InnerPage
      v-if="infoPersonalHandler.props[baseNameMap.itemId.key]"
      class="m-trainee-info"
      @back="infoPersonalHandler.onBack"
    >
      <!-- 详情 -->
      <PerInfo
        v-bind="infoPersonalHandler.props"
        @edit="infoPersonalHandler.onEdit"
        @update="infoPersonalHandler.onUpdate"
      />
    </InnerPage>
    <!-- </Transition> -->
  </div>
</template>

<style lang="less" scoped></style>
